<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	$(function() {

		var colors = Highcharts.getOptions().colors, categories = [ 'MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera' ], name = 'Browser brands', data = [ {
			y : 55.11,
			color : colors[0],
			drilldown : {
				name : 'MSIE versions',
				categories : [ 'MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0' ],
				data : [ 10.85, 7.35, 33.06, 2.81 ],
				color : colors[0]
			}
		}, {
			y : 21.63,
			color : colors[1],
			drilldown : {
				name : 'Firefox versions',
				categories : [ 'Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0' ],
				data : [ 0.20, 0.83, 1.58, 13.12, 5.43 ],
				color : colors[1]
			}
		}, {
			y : 11.94,
			color : colors[2],
			drilldown : {
				name : 'Chrome versions',
				categories : [ 'Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0' ],
				data : [ 0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22 ],
				color : colors[2]
			}
		}, {
			y : 7.15,
			color : colors[3],
			drilldown : {
				name : 'Safari versions',
				categories : [ 'Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 'Safari 3.1', 'Safari 4.1' ],
				data : [ 4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14 ],
				color : colors[3]
			}
		}, {
			y : 2.14,
			color : colors[4],
			drilldown : {
				name : 'Opera versions',
				categories : [ 'Opera 9.x', 'Opera 10.x', 'Opera 11.x' ],
				data : [ 0.12, 0.37, 1.65 ],
				color : colors[4]
			}
		} ];

		// Build the data arrays
		var browserData = [];
		var versionsData = [];
		for ( var i = 0; i < data.length; i++) {

			// add browser data
			browserData.push({
				name : categories[i],
				y : data[i].y,
				color : data[i].color
			});

			// add version data
			for ( var j = 0; j < data[i].drilldown.data.length; j++) {
				var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5;
				versionsData.push({
					name : data[i].drilldown.categories[j],
					y : data[i].drilldown.data[j],
					color : Highcharts.Color(data[i].color).brighten(brightness).get()
				});
			}
		}

		// Create the chart
		$('#container').highcharts({
			chart : {
				type : 'pie'
			},
			title : {
				text : 'Browser market share, April, 2011'
			},
			yAxis : {
				title : {
					text : 'Total percent market share'
				}
			},
			plotOptions : {
				pie : {
					shadow : false,
					center : [ '50%', '50%' ]
				}
			},
			tooltip : {
				valueSuffix : '%'
			},
			series : [ {
				name : 'Browsers',
				data : browserData,
				size : '60%',
				dataLabels : {
					formatter : function() {
						return this.y > 5 ? this.point.name : null;
					},
					color : 'white',
					distance : -30
				}
			}, {
				name : 'Versions',
				data : versionsData,
				size : '80%',
				innerSize : '60%',
				dataLabels : {
					formatter : function() {
						// display only if larger than 1
						return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
					}
				}
			} ]
		});
	});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
